<template>
  <main class="classes">
    <breadcrumb title="添加班级" homePath="/admin" />
    <el-card>
      <el-row>
        <el-col :span="6">
          <el-input
            placeholder="请填写班级名称"
            prefix-icon="el-icon-edit"
            v-model="className"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="addClass">添加</el-button>
        </el-col>

        <el-col :span="6" :offset="5">
          <el-input
            placeholder="请输入要查找的班级"
            prefix-icon="el-icon-search"
            v-model="searchClassName"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-row
            ><el-button type="primary" @click="searchClass">查找</el-button>
            <el-button type="primary" @click="reset">重置</el-button></el-row
          >
        </el-col>
      </el-row>

      <h1>班级列表</h1>

      <el-table :data="classData" stripe style="width: 100%" border>
        <template slot="empty">
          <p>{{ baseInfoText }}</p>
        </template>
        <el-table-column prop="c_id" label="班级编号" width="280" />
        <el-table-column prop="class" label="班级名称" width="280" />
        <el-table-column label="班级详情">待维护 </el-table-column>
      </el-table>
      <!-- 底部分页栏 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allClassNum"
      />
    </el-card>
  </main>
</template>

<script>
import Breadcrumb from "components/Breadcrumb.vue";
import { getAllClasses } from "network/admin/getAllClasses";
import { getClassesSearch } from "network/admin/getClassesSearch";
import { addClasses } from "network/admin/addClasses";
export default {
  components: { Breadcrumb },
  data() {
    return {
      className: "",
      classData: [],
      searchClassName: "",
      allClassNum: 0,
      currentPage: 1,
      queryInfo: {
        pagenum: 1,
        pagesize: 2,
      },
      isSearchStatus: false,
      baseInfoText: "",
    };
  },
  created() {
    this.getAllClasses();
    this.$store.commit("setCurrentIndex", {
      type: "adminCurrentIndex",
      index: 3,
    });
  },
  methods: {
    // 获取班级接口
    async getAllClasses() {
      let all = await getAllClasses();
      this.allClassNum = all.length;
      this.classData = await getAllClasses({
        pageSize: this.queryInfo.pagesize,
        currPage: this.queryInfo.pagenum,
      });

      if (this.allClassNum == 0) {
        this.baseInfoText = "暂无数据";
      }
    },
    // 处理改变一页的数量
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      if (this.isSearchStatus) {
        this.getClassesSearch();
      } else {
        this.getAllClasses();
      }
    },
    // 处理改变页码
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      if (this.isSearchStatus) {
        this.getClassesSearch();
      } else {
        this.getAllClasses();
      }
    },
    // 搜索班级
    searchClass() {
      if (this.searchClassName == "") {
        this.$message.error("请输入班级关键词");
      }
      this.isSearchStatus = true;
      this.queryInfo.pagesize = 2;
      this.queryInfo.pagenum = 1;
      this.getClassesSearch();
    },
    // 重置列表
    reset() {
      this.searchClassName = "";
      this.queryInfo.pagesize = 2;
      this.queryInfo.pagenum = 1;
      this.isSearchStatus = false;
      this.getAllClasses();
    },
    // 调用搜索班级接口
    async getClassesSearch() {
      const all = await getClassesSearch({
        className: this.searchClassName,
      });
      this.allClassNum = all.length;
      this.classData = await getClassesSearch({
        pageSize: this.queryInfo.pagesize,
        currPage: this.queryInfo.pagenum,
        className: this.searchClassName,
      });
    },
    // 添加班级
    async addClass() {
      if (this.className == "") {
        return this.$message.error("请填写班级");
      }
      let res = await addClasses(this.className);
      if (res == "添加成功") {
        return this.$message.success(res);
      }
      this.$message.error(res);
    },
  },
};
</script>

<style lang="less" >
.el-card {
  h1 {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>